<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root">

    </div>
</body>
<script src="../react@17.js"></script>
<script src="../react-dom@17.js"></script>
<script src="../babel.js"></script>
<script type="text/babel">
    function App(){
        let name='张三';
        let age = 18;
        let obj = {
        name:"李四",
        phone:110
        }
        return (
            <div>
             我是一个大组件  
             <Child name={name} age={age}/>  
             <Mychild {...obj}/>
            {
                // 当前所有属性在一个对象中可以是用{...obj}绑定每一个属性
                /* 
                <Mychild name={obj.name} age={obj.age} />
                */
            }
            </div>
        )
    }

    //  组件中的数据都是私有的 子组件没有办法直接使用父组件中数据,父组件向子组件传值
    /* 
    1.在父组件中的子组件标签上绑定一个自定义属性。
    2.在子组件函数中使用props参数接受
    */
    function Child(props){
        console.log(props)
        let {name,age} = props;
        return (
            <div>
            我是一个小组件 {name}--{age}
            </div>
        )
    }
 
    function Mychild(props){
        console.log(props)
        return (
            <div>
                我是一个小小组件    
            </div>
        )
    }

    ReactDOM.render(<App/>,document.getElementById("root"))
</script>
</html>